<template>
	<view class="page-container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">店铺申请</text>
			<text class="subtitle">请填写真实信息，我们将尽快为您审核</text>
		</view>
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 姓名输入 -->
			<view class="form-item">
				<text class="label">姓名<text class="required">*</text></text>
				<input class="input" @input="getname" type="text" placeholder="请输入您的真实姓名" 
					placeholder-class="placeholder" />
			</view>
			
			<view class="form-item">
				<text class="label"> 淘宝店铺地址 </text>
				<input class="input" @input="gettaobao" type="text" placeholder="请输入" 
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label"> 阿里巴巴地址 </text>
				<input class="input" @input="getalibaba" type="text" placeholder="请输入" 
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label"> 闲鱼店铺地址 </text>
				<input class="input" @input="getxianyu" type="text" placeholder="请输入" 
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label"> 天猫商城地址 </text>
				<input class="input" @input="gettianmao" type="text" placeholder="请输入" 
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label"> 银行名称 </text>
				<input class="input" @input="getbankname" type="text" placeholder="请输入" 
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label"> 银行卡号 </text>
				<input class="input" @input="getbanknumber" type="text" placeholder="请输入" 
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<text class="label"> 支付宝账号 </text>
				<input class="input" @input="getzhifubao" type="text" placeholder="请输入" 
					placeholder-class="placeholder" />
			</view>
		</view>
				
		<view class="zhanwei"> </view>
				
		<view class="form-container">
			<!-- 图片上传 -->
			<view class="form-item">
				<text class="label">营业执照<text class="required">*</text></text>
				<view class="upload-container">
					<view class="upload-btn" @click="chooseImage('zhizhaoimage')">
						<uni-icons v-if="!zhizhaoimage" type="plusempty" size="32" color="#999"></uni-icons>
						<image v-else :src="zhizhaoimage" class="uploaded-image"></image>
					</view>
					<text class="upload-tip" v-if="!zhizhaoimage">点击上传营业执照</text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">支付宝收款码<text class="required">*</text></text>
				<view class="upload-container">
					<view class="upload-btn" @click="chooseImage('zfimage')">
						<uni-icons v-if="!zfimage" type="plusempty" size="32" color="#999"></uni-icons>
						<image v-else :src="zfimage" class="uploaded-image"></image>
					</view>
					<text class="upload-tip" v-if="!zfimage">点击上传支付宝收款码</text>
				</view>
			</view>
			<view class="form-item">
				<text class="label">支付宝商家收款码<text class="required">*</text></text>
				<view class="upload-container">
					<view class="upload-btn" @click="chooseImage('zfsjimage')">
						<uni-icons v-if="!zfsjimage" type="plusempty" size="32" color="#999"></uni-icons>
						<image v-else :src="zfsjimage" class="uploaded-image"></image>
					</view>
					<text class="upload-tip" v-if="!zfsjimage">上传支付宝商家收款码</text>
				</view>
			</view>
			<view class="form-item">
				<text class="label">微信商家收款码<text class="required">*</text></text>
				<view class="upload-container">
					<view class="upload-btn" @click="chooseImage('payimage' )">
						<uni-icons v-if="!payimage" type="plusempty" size="32" color="#999"></uni-icons>
						<image mode="aspectFill" v-else :src="payimage"  class="uploaded-image"></image>
					</view>
					<text class="upload-tip" v-if="!payimage">上传微信商家收款码</text>
				</view>
			</view>
			
		</view>
		
		
		<!-- 提交按钮 -->
		<view class="submit-btn-container">
			<button class="submit-btn"  @click="handleSubmit">
				提交申请
			</button>
			<view style="height: 10px;"></view>
		</view>
		
		

	</view>
</template>

<script>
	
	import { baseUrl } from "common/config.js";
	
	import { curl } from 'common/api.js';
			
	export default {
		data() {
			return {
				imageUrl:'',
				zfimage:'',
				zfsjimage:'',
				payimage:'',
				zhizhaoimage:'',
				zhifubao:'',
				bankname:'',
				banknumber:'',
				xianyu:'',
				taobao:'',
				alibaba:'',
				name:'',
				tianmao:''
					}
		},
		methods: {
      handleSubmit(){
		  var that=this;
		  
          var info={
            name:this.name,
            taobao:this.taobao,
            alibaba:this.alibaba,
            xianyu:this.xianyu,
            tianmao:this.tianmao,
            bankname:this.bankname,
            banknumber:this.banknumber,
            zhifubao:this.zhifubao,
            zhizhaoimage:this.zhizhaoimage,
            zfimage:this.zfimage,
            zfsjimage:this.zfsjimage,
            payimage:this.payimage
          }
          curl('shop/apply',info).then(res=>{
            if(res.code==1){
              uni.showToast({
                title: res.msg,
                icon:'success'
              })




              if (res.data.code==1){
				  
				  setTimeout(function(){
				  	uni.navigateTo({
				  	  url:'/pages/index/index'
				  	})
				  },800)
               
              }


            }
          })


      },
			getzhifubao(ret){
				this.zhifubao=ret.detail.value
			},
			getbankname(ret){
				this.bankname=ret.detail.value
			},
			getbanknumber(ret){
				this.banknumber=ret.detail.value
			},
			gettianmao(ret){
				this.tianmao=ret.detail.value
			},
			getname(ret){
				this.name=ret.detail.value
			},
			gettaobao(ret){
				this.taobao=ret.detail.value
			},
			getalibaba(ret){
				this.alibaba=ret.detail.value
			},
			getxianyu(ret){
				this.xianyu=ret.detail.value
			},
			chooseImage(types) {
				var that=this;
				var token = uni.getStorageSync('token');
				console.log(types);
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						var ss=res.tempFilePaths;
						that.imgurl=ss[0];
						uni.uploadFile({
							url: `${baseUrl}`+'common/upload',
							// url: "/dpc" + 'upload',
							filePath: ss[0], // 本地上传完成后的路径
							name: 'file', 
							formData: {},
							header:{"token": token},
							success: function(uploadFileRes) {
								var ret=JSON.parse(uploadFileRes.data);
								console.log(ret.data)
                that[types]=ret.data.fullurl
							}
						});
					
					}
				});
			},
					
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #f7f7f7;
	}
	
	.zhanwei{
		height: 1px;
		margin-bottom: 20rpx;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.header {
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.form-container {
		flex: 1;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.form-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.required {
		color: #f56c6c;
		margin-left: 6rpx;
	}

	.input {
		height: 70rpx;
		font-size: 28rpx;
		color: #333;
		width: 100%;
		padding: 0;
	}

	.placeholder {
		color: #ccc;
	}

	.picker {
		width: 100%;
	}

	.picker-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}

	.error-tip {
		font-size: 24rpx;
		color: #f56c6c;
		margin-top: 10rpx;
		display: block;
	}

	.upload-container {
		margin-top: 20rpx;
	}

	.upload-btn {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #ddd;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f9f9f9;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.upload-tip {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		display: block;
	}

	.submit-btn-container {
		margin-top: 40rpx;
		padding: 0 30rpx;
	}

	.submit-btn {
		background-color: #2979ff;
		color: #fff;
		border-radius: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}

	.submit-btn[disabled] {
		background-color: #a0c0ff;
		color: #fff;
	}
</style>